<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="zh-Hans"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="style.css"/>
    <title>canvas画板</title>
</head>
<body>
<!--我发现一个问题，就是不能在画布的根元素上加clearfix，否则页面的地步始终会出现一道空白-->
<div class="wrapping">
    <canvas id="canvas"></canvas>
    <div class="tools clearfix">
        <div class="empty" style="cursor:pointer">
            <svg class="icon">
                <use xlink:href="#icon-clear"></use>
            </svg>
        </div>
        <div class="download" style="cursor: pointer">
            <svg class="icon">
                <use xlink:href="#icon-download"></use>
            </svg>
        </div>
    </div>
    <div class="color" style="cursor: pointer">
        <span style="background:black;" class="active black"></span>
        <span style="background:red;" class="red"></span>
        <span style="background:orange;" class="orange"></span>
        <span style="background:green;" class="green"></span>
        <span style="background:blue;" class="blue"></span>
        <span style="background:violet;" class="violet"></span>
    </div>
    <div class="pen-earse">
        <svg class="icon pen active" >
            <use xlink:href="#icon-pen"></use>
        </svg>
        <svg class="icon eraser" >
            <use xlink:href="#icon-eraser"></use>
        </svg>
    </div>
</div>

<script src="//at.alicdn.com/t/font_1685926_b08yklsw3h9.js"></script>
<script src="main.js"></script>
</body>
</html>
